<template>
  <div>
    <el-dialog
      title="修改手机号"
      :visible.sync="dialogVisible"
      width="450px"
      :before-close="closeEditDialog"
      :close-on-click-modal="false"
      :append-to-body="true"
    >
      <el-form
        :model="bindForm"
        :rules="rules"
        ref="refAddInfo"
        label-width="100px"
      >
        <el-form-item size="small" prop="mobile" label="新手机号码">
          <el-input
            clearable
            ref="input"
            placeholder="请输入"
            maxlength="11"
            v-model.trim="bindForm.mobile"
          >
          </el-input>
        </el-form-item>

        <el-form-item size="small" prop="code" label="短信验证码">
          <div style="position: relative">
            <el-input
              placeholder="请输入"
              maxlength="6"
              v-model.trim="bindForm.code"
            >
            </el-input>
            <div @click="smsCodeClick2" class="code">
              <span v-show="showCountDown2">获取验证码</span>
              <span v-show="!showCountDown2">{{ countDown2 }}秒重新获取</span>
            </div>
          </div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeEditDialog" class="cancel-button">取 消</el-button>
        <el-button size="small" @click="editSubmit" type="primary" class="confirm-button"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getSmsCode, reqChangeMobile } from "@/api/api";
import { mapState } from "vuex";
import { validMobile } from "@utils/validate";

export default {
  name: "add",
  components: {},
  data() {
    return {
      dialogVisible: false,
      bindForm: {},
      showCountDown2: true, //显示倒计时
      countDown2: "", //倒计时一分钟
      // 表单验证规则
      rules: {
        mobile: [
          { required: true, message: "请输入新手机号码", trigger: "blur" },
          {
            validator: validMobile,
          },
        ],
        code: [
          { required: true, message: "请输入短信验证码", trigger: "blur" },
        ],
      },
    };
  },
  computed: {
    ...mapState(["user"]),
  },
  methods: {
    // 点击获取短信验证码
    async smsCodeClick2() {
      this.$notify.closeAll();
      if (!this.bindForm.mobile)
        return this.$modal.notifyWarning("请输入手机号");
      if (this.bindForm.mobile.length < 11)
        return this.$modal.notifyWarning("手机号码为11位数字");
      const reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
      if (!reg.test(this.bindForm.mobile))
        return this.$modal.notifyWarning("请输入正确的手机号");
      if (!this.showCountDown2) return; //60s内只需发一次验证码
      // 发送验证码
      let res = await getSmsCode({
        mobile: this.bindForm.mobile,
      });
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.$modal.notifyWarning("请注意查收手机短信验证码");

      this.showCountDown2 = false;
      this.countDown2 = 60;
      let intervalId = setInterval(() => {
        if (this.countDown2 > 0 && this.countDown2 <= 60) {
          this.countDown2--;
        } else {
          this.showCountDown2 = true;
          clearInterval(intervalId);
          intervalId = null;
        }
      }, 1000);
    },
    editSubmit() {
      this.$refs.refAddInfo.validate(async (valid) => {
        if (valid) {
          //  更换手机号
          const res2 = await reqChangeMobile({
            id: this.user.userId,
            mobile: this.bindForm.mobile,
            code: this.bindForm.code,
          });
          if (res2.code !== 20000)
            return this.$modal.notifyWarning(res2.message);
          this.$modal.notifySuccess("修改手机号成功");
          this.$store.commit("saveMobile", this.bindForm.mobile); //页面更换手机号
          this.closeEditDialog(); //取消按钮清空
        }
      });
    },
    // 点击关闭弹框
    closeEditDialog() {
      this.countDown2 = "";
      this.$refs.refAddInfo.resetFields();
      this.dialogVisible = false;
    },
  },
};
</script>

<style lang="less" scoped>
@import url("../../views/common.less");

.code {
  position: absolute;
  width: 90px;
  height: 30px;
  line-height: 30px;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  color: #7367f0;
  cursor: pointer;
}
</style>
